<template>
	<view class="relative flex" :style="{width:props.width+'rpx',height:(props.height+32)+'rpx'}">
		<!-- #ifdef APP-NVUE -->
		<scroll-view @scroll="onScroll" :show-scrollbar="false" :scroll-x="true" class="flex flex-row flex-nowrap nowrap" :style="{width:props.width+'rpx',height:props.height+'rpx'}">
			<slot name="default"></slot>
		</scroll-view>
		<!-- #endif -->
		<!-- #ifndef APP-NVUE -->
		<scroll-view @scroll="onScroll" :scroll-x="true" class="flex flex-row flex-nowrap nowrap" :style="{width:props.width+'rpx',height:props.height+'rpx'}">
			<view class="flex-1 flex-row flex-nowrap">
				<slot name="default"></slot>
			</view>
		</scroll-view>
		<!-- #endif -->
		<view v-if="_showBar" class="absolute l-0 b-10 flex " :class='alignKey[props.align]' :style="{width:props.width+'rpx',height:32+'rpx'}">
			<view class="flex-1 pr-40" style="width:0px">
				<slot name="barll"></slot>
			</view>
			<view class="px-32" style="width:164rpx;">
				<tm-sheet no-level :round="6" :width="100" :height="8" :color="props.bgColor" :margin="[0,0]" :padding="[0,0]">
					<view class="bar" :style="{
						transform: `translateX(${left}px)`
					}">
						<tm-sheet :round="6"  :width="50" :height="8" :color="props.color"  :margin="[0,0]" :padding="[0,0]"></tm-sheet>
					</view>
				</tm-sheet>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref,computed ,PropType} from "vue"
	import tmSheet from "../tm-sheet/tm-sheet.vue";
	import tmText from "../tm-text/tm-text.vue";
	//居中，两边对齐。
	type alignType = "center"|"between";
	const props = defineProps({
		width:{
			type:Number,
			default:636
		},
		height:{
			type:Number,
			default:300
		},
		/**
		 * 是否显示底部导航条
		 */
		showBar:{
			type:Boolean,
			default:true
		},
		bgColor:{
			type:String,
			default:'grey-2'
		},
		color:{
			type:String,
			default:'primary'
		},
		align:{
			type:String as PropType<alignType>,
			default:'center'
		}
	})
	const left = ref(0)
	const totalWidth = uni.upx2px(50)
	const totalContWidth = uni.upx2px(props.width)
	const _showBar = computed(()=>props.showBar)
	const alignKey = {
		"center":"flex-center",
		"between":"flex-row flex-row-center-between"
	}
	const onScroll = (e:Event)=>{
		if(!_showBar.value) return;
		let sL = e.detail.scrollLeft;
		let sT = e.detail.scrollWidth;
		let maxLeft = Math.abs(sT-totalContWidth)
		let nowLeft = sL/maxLeft * totalWidth
		if(sL<=0) nowLeft=0;
		if(Math.abs(sL)>=maxLeft) {
			nowLeft =totalWidth
		}
		left.value = nowLeft;
	}
</script>

<style scoped>
	.bar{
		transition-property: transform;
		transition-delay: 0;
		transition-duration: 0.05s;
		transition-timing-function:linear;
		transform: translateX(0px);
	}
	/* #ifndef APP-NVUE */
	scroll-view::-webkit-scrollbar,
	scroll-view::-webkit-scrollbar,
	scroll-view::-webkit-scrollbar {
		display: none;
	}
	/* #endif */
</style>